<template>
	<view class="pageAll">
		<view class="block" v-for="(item,index) in titleList" :key="index" @click="detail(item.id)">
			<view class="block_left">
				<image class="image" :src="item.imageInput" mode=""></image>
				<text class="txt"> {{ item.synopsis }} </text>
			</view>
			<image class="block_right" src="/static/images/right.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js";
	import {
		styleContent
	} from "@/api/user.js"
	export default {
		data() {
			return {
				detailAddress: '/pages/learning_garden/detail',
				titleList: [],
				getContent: {
					cid: '',
					limit: 20,
					page: 1,
				}
			}
		},
		onLoad() {
			this.getTitle()
		},
		methods: {
			getTitle() {
				uni.showLoading({
					title: '正在加载'
				})
				request.get("article/list/741").then((res) => { 
					uni.hideLoading()
					this.getStyleContent(res.data.list[0].id); 
					this.titleList = res.data.list
					
				}).catch((res) => {
					this.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			},
			getStyleContent(cid) {
				// styleContent(cid).then(res => {
				// 	if (res.code == 200) {
				// 		this.titleList = res.data.list
				// 	} else {
				// 		this.$util.Tips({
				// 			title: res.message
				// 		});
				// 	}
				// })
			},
          detail(id){
			  uni.navigateTo({
			      url: `/pages/learning_garden/detail?id=${id}`
			  });
		  }
		}
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #F5F6F7;
		/* #endif */
	}
</style>
<style lang="less" scoped>
	.pageAll {
		padding: 23rpx 33rpx;
		height: 100%;

		.block {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: white;
			padding-right: 31rpx;
			margin-bottom: 20rpx;

			.block_left {

				display: flex;
				align-items: center;

				.txt {
					width: calc(100% - 128rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //使用自适应布局
					-webkit-line-clamp: 1; //设置超出行数，要设置超出几行显示省略号就把这里改成几
					-webkit-box-orient: vertical;
				}

				.image {
					width: 128rpx;
					height: 128rpx;
					margin-right: 23rpx;
				}
			}

			.block_right {
				height: 22rpx;
				width: 16rpx;
			}
		}
	}
</style>